<template>
    <div class="home">
        <!-- 头部 -->
        <my-header></my-header>
        <!-- 轮播图 -->
        <my-banner></my-banner>
        <!-- 最新专辑 -->
        <new-songs :songs="albumNewest"></new-songs>
        <!-- 推荐歌曲 -->
        <new-songs :songs="recommendSongs"></new-songs>
        <!--  最新歌曲-->
        <new-songs :songs="newSongs"></new-songs>

        <!-- 三级路由出口 -->
        <!--  enter-active-class="animate__animated animate__backInDown" 
         enter-active-class="animate__animated animate__zoomInUp"-->
        <transition  
            enter-active-class="animate__animated animate__bounceInUp" 
            leave-active-class="animate__animated animate__flipOutY" 
            >
            <!-- <keep-alive> -->
                <router-view></router-view>
            <!-- </keep-alive> -->
        </transition>
    </div>
</template>

<style>
.home {
    padding-bottom: 50px;
}
</style>


<script>
// 导入组件
import MyHeader from "@/components/MyHeader.vue"
import MyBanner from "@/components/MyBanner.vue"
import NewSongs from "@/components/NewSongs.vue"

//引入动画库
import 'animate.css'

// 导入接口
import { albumNewestFn , recommendSongsFn , newsongFn} from '@/api/index'

export default {
    name: 'home',
    // 注册组件
    components: {
        MyHeader,
        MyBanner,
        NewSongs,
    },
    // 数据
    data(){
        return {
            albumNewest: [],
            recommendSongs: [],
            newSongs: []
        }
    },
    // 方法
    methods: {
        // 获取最新专辑
        async albumNewestFunc(){
            let arr = []
            await albumNewestFn()
            .then(
                data=>{
                    // console.log('1.0',data)
                    // 数据处理
                    let {code, albums} = data;
                    if(code == 200){
                        // console.log('1.0',albums)
                        // 整合数据
                        arr = albums.map(item=>{
                            // let coverUrl = item.picUrl;
                            let id = item.id;
                            let artist = item.artist;
                            let title = '最新专辑'
                            let name = item.name // 专辑名称
                            return {
                                // coverUrl,
                                id,
                                artist,
                                title,
                                name
                            }
                        })
                        // console.log(arr)
                        // 赋值
                        this.albumNewest = arr;
                    }
                },
                err=>{
                    console.log(err)
                }
            )
            // console.log(arr)
            // this.albumNewest = [...arr];
        },

        // 获取每日推荐歌曲
        async recommendSongsFunc(){
            await recommendSongsFn()
            .then(
                content=>{
                    // console.log("3.0",content)
                    let {code , data: {dailySongs}} = content;
                    if(code==200){
                        // console.log("4.0",dailySongs)
                        let arr = dailySongs.map(item=>{
                            // let coverUrl = item.al.picUrl;
                            let id = item.id;
                            let title = '推荐歌曲'
                            let artist = { picUrl: item.al.picUrl,name: item.al.name}
                            let name = item.name;
                            let type = 'recommand';
                            let path = '/home/list'
                            return {
                                id,
                                title,
                                artist,
                                name,
                                type,
                                path
                            }
                        })
                        // 进行赋值
                        this.recommendSongs = arr;
                    }
                }
            )
        },

        // 获取新音乐
        async newsongFunc(){
            await newsongFn()
            .then(
                content=>{
                    // console.log("6.0",content)
                    let {code , result } = content;
                    if(code==200){
                        // console.log("7.0",result)
                        let arr = result.map(item=>{
                            let id = item.id;
                            let title = '最新音乐'
                            let artist = { picUrl: item.picUrl}
                            let name = item.name;
                            let type = 'newsong';
                            let path = '/home/list'
                            return {
                                id,
                                title,
                                artist,
                                name,
                                type,
                                path
                            }
                        })
                        // 进行赋值
                        this.newSongs = arr;
                    }
                }
            )
        }
    },

    created(){
        // 初始化
        this.albumNewestFunc()
        this.recommendSongsFunc()
        this.newsongFunc()
    }
}

</script>